const { resolve } = require('path')
// 生成html文件的插件
const HtmlPlugin = require('html-webpack-plugin')
// 克隆public下面除index.html文件以外的所有其他静态文件
const CopyPlugin = require('copy-webpack-plugin')
// 生产环境
module.exports = {
  entry: './src/index.js',
  output: {
    filename: './js/app.js',
    path: resolve(__dirname, '../build'),
    publicPath: '/', // 引入app.js的时候.路径就是/js/app.js
  },
  mode: 'production',
  plugins: [
    new HtmlPlugin({
      template: './public/index.html',
    }),
    new CopyPlugin({
      patterns: [
        {
          from: 'public',
          to: resolve(__dirname, '../build'),
          globOptions: {
            // htmlplug已经处理过index.html了. copyplug不要再处理index.html,否则无法打包
            ignore: ['**/index.html'],
          },
        },
      ],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.ejs$/,
        loader: 'ejs-loader',
        options: {
          variable: 'data', // 可以在模板当中使用 data 进行动态渲染. 这个值可以自定义.比如:xxx
          // interpolate: '\\{\\{(.+?)\\}\\}', // 表示使用 {{}} 语法. 我们这里不需要
        },
      },
    ],
  },

  resolve: {
    extensions: ['.js', '.json', '.ejs'], // 尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。

    // 配置路径别名
    alias: {
      '@v': resolve(__dirname, '../src/views'),
      '@api': resolve(__dirname, '../src/api'),
    },
  },
}
